<template>
  <div class="box">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" align="center" />
      <el-table-column prop="itime" label="操作时间" width="200" align="center" />
      <el-table-column prop="admin_id" label="管理人ID" align="center" />
      <el-table-column prop="admin_name" label="管理人昵称" align="center" />
      <el-table-column prop="ip" label="操作 IP" align="center" />
      <el-table-column prop="url" label="操作 URL" align="center" />
      <!-- <el-table-column label="操作" width="260px" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 翻页 -->
    <el-pagination class="pagination" background layout="total,prev, pager,next" :total="total" :page-size="pageSize"
      :hide-on-single-page="hide" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
  import {
    getOptLogList,
    delOptLog
  } from '@/api/log.js'
  export default {
    name: 'Operate',
    data() {
      return {
        tableData: [],
        total: 0,
        pageSize: 10,
        currPage: 1,
        loading: true,
        hide: true
      }
    },
    created() {
      this.getList(1)
    },
    methods: {
      // 日志列表
      getList(num) {
        this.loading = true
        getOptLogList({
          page: this.currPage,
          size: this.pageSize
        }).then(res => {
          // console.log(res)
          this.loading = false
          this.tableData = res.data.list
          this.total = res.data.total_num
        })
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currPage = val
        this.getList(val)
      },
      handleDelete(row) {
        var id = row.id
        this.$confirm('此操作将删除将删除日志, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delOptLog({
            id: id
          }).then((res) => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              // 刷新当前页
              location.reload()
            } else {
              this.$message({
                type: 'info',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>

<style lans="scss" scoped>
  .box {
    margin: 20px 50px;
  }

  .pagination {
    margin-top: 20px;
    text-align: right;
  }
</style>